<template>
	<!-- 此处改动， 为新添加组件 -->
	<view class="container">
		<view class="zhezao" @touchmove.stop.prevent="moveHandle" v-if="false" v-show="isZheZao">
			<!-- v-if="isSHowyindao&&userType==1" 没有视频 暂时不显示 -->
			<view class="tankaung" >
				<view class="close">
					<image src="https://images.linglinggong.net/Frh-6iIMA4LDhT2LvE1yZisK5cV9" mode=""  @click="close"></image>
				</view>
				<view class="guide">
					<view class=" test1">新手发单教程</view>
					<view class="test2">发单引导全在这里!</view>
					<view class="image">
						<image v-show="!video" src="https://images.linglinggong.net/FstQRmep_XtmeUcq1jw3yEdacI4x" mode="" @click="videoClick()"></image>
						<video v-show="video" @ended="EventHandle" :enable-play-gesture="true" :controls="false"
							:show-loading="false" :show-fullscreen-btn="false" :show-play-btn="false"
							:vslide-gesture-in-fullscreen="false" :enable-progress-gesture="false" id="myvideo"
							enable-play-gesture=true 
							@fullscreenchange="videoControl" 
							src="http://images.linglinggong.net/lvIU8yzkdeI5AkiTRkwnV1D8CofW"
							enable-progress-gesture="false" poster="https://images.linglinggong.net/FstQRmep_XtmeUcq1jw3yEdacI4x"></video>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				hide:false,//直接隐藏
				isZheZao:true,
				video:false,
				videoContext: null,
				isSHowyindao: false,
				userType: '', //用户类型，0雇员，1雇主
			}
		},
		methods:{
			// 遮罩层禁止滚动
			moveHandle(){
				return
			},
			// 关闭弹框
			close(){
				this.isZheZao=false
			},
			// 视频点击
			videoClick(){
				// console.log('点击全屏,我要全屏了')
				this.video = true
				// 全屏
				this.$nextTick(() => {
					// requestFullScreen全屏 direction 屏幕得角度！
					this.videoContext.requestFullScreen({
						direction: 0
					})
				})
			},
			async videoControl(e) {
				if (e.detail.fullScreen) { //e.detail.fullScreen是否为全屏
			
					this.videoContext.play();
				} else {
					console.log(1111)
					this.video = false
					//停止播放
					// this.videoContext.stop();   各位老板不要选择stop 选择了stop 缩小视频还会自动播放
					this.videoContext.pause();
			
				}
			},
			async EventHandle(e) {
				// console.log(e)
				this.videoContext.exitFullScreen()
				this.video = false
				setTimeout(() => {
					this.isSHowyindao = false
				}, 800)
				let res = await this.$fetch(this.$api.updAllNoviceguide, 'GET')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				let result = await this.$fetch(this.$api.get_current_user, {}, 'GET')
				if (result.code) return uni.showToast({
					title: result.msg,
					icon: 'none'
				})
				uni.setStorageSync('userInfo', result.data)
			},
			
		},
		created() {
			this.videoContext = uni.createVideoContext('myvideo');
			if(uni.getStorageSync('userInfo').noviceguide == 0){
				this.isSHowyindao = true
			}
			this.userType = uni.getStorageSync('userInfo').userType
		},
	}
</script>

<style scoped lang="less">
	.container{
		&>.zhezao{
			position: fixed;
			top: 0px;
			left: 0;
			z-index: 999;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,.4);
			display: flex;
			align-items: center;
			&>.tankaung{
				width: 550rpx;
				margin: auto ;
				
				.close{z-index: 999;
					margin-bottom: 30rpx;
					&>image{
						width: 68rpx;
						height: 68rpx;
					}
				}
				
				&>.guide{
					overflow: hidden;
					font-family: PingFang SC;
					width: 550rpx;
					height: 829rpx;
					background: #FFFFFF;
					border-radius: 12rpx;
						.test1{
							width: 100%;
							height: 35rpx;
							font-size: 36rpx;
							font-weight: bold;
							color: #000000;
							text-align: center;
							margin: 39rpx 0 18rpx 0;
						}
						.test2{
							text-align: center;
							width: 100%;
							height: 26rpx;
							font-size: 28rpx;
							font-weight: 500;
							color: #787878;
						}
					&>.image{
						width: 470rpx;
						height: 630rpx;
						border-radius: 12rpx;
						margin: 44rpx auto 40rpx;
						&>image{
							z-index: 999999;
							width: 470rpx;
							height: 630rpx;
							border-radius: 12rpx;
						}
					}
				}
				
				
			}
		}
		
	}
</style>
